<template>
  <div id="app" class="kw-wrapper" v-on:mouseup="handlerMoveEnd" v-on:mousemove="handlerMove">
    <kw-header></kw-header>
    <kw-main>
      <form-widget></form-widget>
      <form-canvas></form-canvas>
      <form-prop></form-prop>
    </kw-main>
    <dragging></dragging>
  </div>
</template>

<script>
  import { MOVE_START_EVENT, MOVE_EVENT, MOVE_IN_CANVAS_EVENT, MOVE_END_EVENT } from './common/event'
  import KwHeader from './layout/KwHeader'
  import KwMain from './layout/KwMain'
  import FormWidget from './layout/FormWidget'
  import FormCanvas from './layout/FormCanvas'
  import FormProp from "./layout/FormProp";
  import Dragging from './components/dragging'

export default {
  name: 'App',
  components: {
    Dragging,
    KwHeader,
    KwMain,
    FormProp,
    FormCanvas,
    FormWidget
  },
  data() {
    return {
      isStart: false,
      componentView: {}
    }
  },
  created() {
    let self = this
    this.$root.EventBus.$on(MOVE_START_EVENT, function (obj) {
      self.isStart = true
      self.componentView = obj.componentView
    })
  },
  methods: {
    handlerMove(e) {
      if (this.isStart) {
        document.querySelector('html').classList.add('kw-cursor-move')
        let obj = {
          type: this.componentView.type,
          clientX: e.clientX,
          clientY: e.clientY,
          componentView: this.componentView
        }
        this.$root.EventBus.$emit(MOVE_IN_CANVAS_EVENT, obj)
        this.$root.EventBus.$emit(MOVE_EVENT, e, obj)
      }
    },
    handlerMoveEnd(e) {
      if (this.isStart) {
        let obj = {
          event: e,
          componentView: this.componentView
        }
        this.$root.EventBus.$emit(MOVE_END_EVENT, obj)
        this.isStart = false
      }
    }
  }
}
</script>

<style>
  #app {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
</style>
